<template>

  <el-row class="login" type="flex" :style="login" justify="center" align="middle">
    <el-col
      :xs="14"
      :sm="12"
      :md="10"
      :lg="8"
      :xl="6"
    >
      <el-form
        label-position="left"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="80px"
        class="login-form"
      >
        <div style="height: 100px;text-align: left;">
          <span style="font-size: 30px;">农业溯源系统</span>
          <div>
            <el-radio-group v-model="loginForm.userFlag">
              <el-radio-button  label="1">种植商</el-radio-button>
              <el-radio-button   label="2">加工商</el-radio-button>
              <el-radio-button   label="3">储运商</el-radio-button>
              <el-radio-button   label="4">经销商</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <el-form-item
          label="账户"
          prop="account"
        >
          <el-input v-model="loginForm.account"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            class="green"
            @click="submitForm"
          >登录</el-button>
          <el-button class="green" @click="register()">注册</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

</template>

<script>

import axios from 'axios'
export default {

  data () {
		var checkPhone = (rule, value, callback) => {
		  const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
		  if (!value) {
		    return callback(new Error('电话号码不能为空'))
		  }
		  setTimeout(() => {
		    // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
		    // 所以我就在前面加了一个+实现隐式转换

		    if (!Number.isInteger(+value)) {
		      callback(new Error('请输入数字值'))
		    } else {
		      if (phoneReg.test(value)) {
		        callback()
		      } else {
		        callback(new Error('电话号码格式不正确'))
		      }
		    }
		  }, 100)
		}
    return {
      login: {
        backgroundImage: "url(" + require("../assets/img/login04.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        height: "100vh",
      },
      // 表单数据
      loginForm: {
        account : null,
        password:null,
        userFlag:1
      },
      formData:{
        logintype:1
      },
			user:null,
      admin:null,
			familyTouPic:'',
			familyPhone:'',
			oldId:'',
      customer:'',
      customerId:'',
      name:'',
      customerPhone:'',
      // 表单验证规则
      rules: {
      //   userName: [
			// 	{ required: true, message: '请输入账户', trigger: 'blur' },
      //     { min: 4, max: 20, message: '账户长度为4-20个字符', trigger: 'blur' },
			//   { required: true, trigger: 'blur'}
			// ],
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 4, max: 20, message: '账户长度为4-20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 20, message: '密码长度为4-20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
	  resetForm(){
		  this.loginForm.adminName=''
		  this.loginForm.password=''
	  },
    register(){
	    this.$router.push("/userRegister");
    },
      submitForm (formName) {

	    if(this.loginForm.account == "admin" && this.loginForm.password == "admin"){
        localStorage.setItem('token', true)
        localStorage.setItem('user_name',"admin")
        this.$router.push({path: '/userHome'})
        return ;
      }
	    let _this = this;
          axios.post('restful/user/userLogin',
            this.loginForm,
            {
              headers: {
                'content-type': 'application/json'
              },
              withCredentials: true
            }).then(function (response) {
            console.log(response)
            if (response.data.result) {
              debugger
              _this.user = response.data.data;
              console.log("用户登录")
              localStorage.setItem("userFlag",_this.loginForm.userFlag)
              localStorage.setItem("userId",_this.user.userId)
              localStorage.setItem('token', true)
              localStorage.setItem('user_name',_this.user.userName)
              let flag = _this.loginForm.userFlag;
              if(flag == 1){
                _this.$router.push({path: '/planterHome'})
                return;
              }
              if(flag == 2){
                _this.$router.push({path: '/processHome'})
                return;
              }
              if(flag == 3){
                _this.$router.push({path: '/logisticsHome'})
                return;
              }
              if(flag == 4){
                _this.$router.push({path: '/saleHome'})
                return;
              }
              _this.$router.push({path: '/'})
            } else {
              _this.$message({
                type: 'error',
                message: '账户或密码错误'
              })
            }
          })
            .catch(function (error) {
              console.log(error)
            })
    }
  }
}
</script>

<style scoped>

/*.login {*/
/*  height: 100vh;*/
/*  background-color: #52BAB5;*/
/*}*/

.login-form {
  padding: 25px;
  border-radius: 15px;
  background-color: #fff;
}
.green{
  background-color: #409EFF;
  color: #fff;
}
</style>
